<template>
  <el-form-item :prop="prop" :label="label">
    <el-slider
      v-model="value"
      :marks="marks"
      :disabled="disabled"
      :max="max"
      :min="min"
      :step="step"
      @change="handleChange"
      @input="handleInput"
    >
    </el-slider>
  </el-form-item>
</template>

<script setup lang="ts" name="BaseProgress">
import { ref, computed, onMounted } from "vue";
let props = withDefaults(
  defineProps<{
    prop?: string;
    label?: string;
    disabled?: boolean;
    max?: number;
    min?: number;
    step?: number;
    marksList?: number[];
    retreat?: boolean;
    modelValue: any;
  }>(),
  {
    modelValue: "",
    min: 0,
    max: 100,
    disabled: false,
    step: 1,
    retreat: true,
    marksList: () => {
      return [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
    },
  }
);
let emits = defineEmits(["input", "change", "update:modelValue"]);

const value = computed({
  // 重新定义
  get: () => {
    marksFn(props.modelValue);
    return props.modelValue;
  },
  set: (value: string) => {
    if (props.retreat || Number(props.modelValue) <= Number(value)) {
      marksFn(value);
      emits("update:modelValue", value);
    }
  },
});

// 里程碑
let marks: any = ref([]);
let marksFn = (valueInfo?: string) => {
  let list = props.marksList.map((item: number) => {
    let markItem: any = [];
    markItem[0] = item;
    markItem[1] = {
      style: {
        color: Number(valueInfo || value) >= item ? "#1989FA" : "#000",
      },
      label: `${item}%`,
    };
    return markItem;
  });
  marks.value = Object.fromEntries(list);
};

onMounted(() => {
  if (props.marksList) {
    marksFn(props.modelValue);
  }
});

// 内容改变事件
function handleChange(val: any) {
  console.log(val);
  emits("change", val);
}
// input 事件
function handleInput(val: any) {
  emits("input", val);
}
</script>

<style lang="less" scoped>
.container {
}
</style>
